import React from 'react'
import {NavLink, Outlet} from 'react-router-dom'

export default function Home() {
  return (
    <div>
      <h2>Home组件</h2>
      <ul className='nav nav-tabs'>
        {/* 路由链接 */}
        <li>
          {/* <NavLink className="list-group-item" to="/home/news">News</NavLink> */}
          <NavLink className="list-group-item" to="news">News</NavLink>
        </li>
        <li>
          <NavLink className="list-group-item" to="/home/message">Message</NavLink>
        </li>
      </ul>

      {/* 在此显示匹配的二级路由组件(News/Message) */}
      <Outlet /> {/* 就是一个位置标记, 匹配的子路由组件就在此显示 */}
    </div>
  )
}
